<template>
  <picker
    mode="multiSelector"
    @change="pickerRegionChange"
    @columnchange="columnRegionChange"
    :value="Rindex"
    :range="region"
    range-key="label"
    ><slot></slot
  ></picker>
</template>

<script>
import RegionJson from "./area.json";
export default {
  props: {
    provinceCode: {
      type: [String, Number],
      default: () => {
        return 0;
      },
    },
    cityCode: {
      type: [String, Number],
      default: () => {
        return 0;
      },
    },
    districtCode: {
      type: [String, Number],
      default: () => {
        return 0;
      },
    },
  },
  watch: {
    districtCode() {
      this.getRegionName();
    },
  },
  data() {
    return {
      Rindex: [0, 0, 0],
      region: [],
      province_code: "",
      city_code: "",
    };
  },
  async created() {
    // await this.getProvince()
    // await this.getCity()
    // await this.getDistrict()
    let region = JSON.parse(JSON.stringify(this.region));
    // data.unshift({code:0,id:0,name:'全国'})
    region[0] = RegionJson;
    region[1] = RegionJson[0].children;
    region[2] = RegionJson[0].children[0].children;
    // this.province_code = RegionJson[0].value
    this.region = region;
    await this.getRegionName();
  },
  methods: {
    // 获取名字
    async getRegionName() {
      if (!this.provinceCode) return;
      const provinceIndex = RegionJson.findIndex(
        (item) => item.value === parseInt(this.provinceCode)
      );
      const province = RegionJson.find(
        (item) => item.value === parseInt(this.provinceCode)
      );

      const cityIndex = province.children.findIndex(
        (item) => item.value === parseInt(this.cityCode)
      );
      const city = province.children.find(
        (item) => item.value === parseInt(this.cityCode)
      );

      const districtIndex = city.children.findIndex(
        (item) => item.value === parseInt(this.districtCode)
      );
      const district = city.children.find(
        (item) => item.value === parseInt(this.districtCode)
      );

      const regionName =
        province.label + "-" + city.label + "-" + district.label;
      this.region = [RegionJson, province.children, city.children];
      this.Rindex = [provinceIndex, cityIndex, districtIndex];

      this.$emit("getRegionName", regionName);
    },
    // 省
    getProvince() {
      this.$u.api.getAllProvince().then(({ data }) => {
        let region = JSON.parse(JSON.stringify(this.region));
        // data.unshift({code:0,id:0,name:'全国'})
        region[0] = data;
        this.province_code = data[0].code;
        this.region = region;
      });
    },
    // 市
    async getCity() {
      if (!this.province_code) {
        let region = JSON.parse(JSON.stringify(this.region));
        region[1] = [];
        this.region = region;
        return;
      }
      this.$u.api
        .getAllCityByProvinceCode(this.province_code)
        .then(({ data }) => {
          let region = JSON.parse(JSON.stringify(this.region));
          region[1] = data;
          this.city_code = data[0].code;
          this.region = region;
        });
    },
    // 区
    async getDistrict() {
      this.$u.api.getAllAreaByCityCode(this.city_code).then(({ data }) => {
        let region = JSON.parse(JSON.stringify(this.region));
        region[2] = data;
        this.region = region;
      });
    },

    // select选择器 确定
    pickerRegionChange(e) {
      const i = e.detail.value;
      this.Rindex = i;
      const params = [
        this.region[0][i[0]],
        this.region[1] && this.region[1].length > 0 ? this.region[1][i[1]] : "",
        this.region[2] && this.region[2].length > 0 ? this.region[2][i[2]] : "",
      ];
      this.$emit("pickerRegionChange", params);
    },
    //某一列的值改变时
    async columnRegionChange(e) {
      const column = e.detail.column;
      const i = e.detail.value;
      if (column === 0) {
        let region = JSON.parse(JSON.stringify(this.region));
        region[1] = RegionJson[i].children;
        if (region[1].length) {
          region[2] = RegionJson[i].children[0].children;
        } else {
          region[2] = [];
        }
        this.region = region;
      }
      if (column === 1) {
        let region = JSON.parse(JSON.stringify(this.region));
        region[2] = region[1][i].children;
        this.region = region;
      }
    },
  },
};
</script>

<style></style>
